
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Check Data Types with <code>Lang</code></title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #demo {
        border-collapse: collapse;
    }
    #demo th {
        background: #E76300;
        color: #fff;
        padding: .2em 1em;
        border: 1px solid #ccc;
    }
    #demo td {
        padding: .2em 1ex;
        border: 1px solid #ccc;
        text-align: center;
    }
    #demo code {
        background: #eee;
        display: block;
        text-align: left;
    }
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Check Data Types with <code>Lang</code></h1>

<div class="exampleIntro">
	<p>The <a href="http://developer.yahoo.com/yui/3/yui/">YUI Global Object</a>
includes several useful type-checking methods in the <code>Lang</code>
object.  In addition to the 'isXYZ' type check methods, YUI3 includes
<code>Y.Lang.type</code>, which returns a string representing the type of the tested
object.  Click the "Check" button in each row to evaluate the data.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<table id="demo">
    <thead>
        <tr>
            <th>Data</th>
            <th>isObject</th>
            <th>isArray</th>
            <th>isFunction</th>
            <th>type</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>null<code></td>
            <td colspan="4"><input type="button" name="demo-1" id="demo-1" value="check"/></td>
        </tr>
        <tr>
            <td><code>[] or new Array()</code></td>
            <td colspan="4"><input type="button" name="demo-2" id="demo-2" value="check"/></td>
        </tr>
        <tr>
            <td><code>{} or new Object()</code></td>
            <td colspan="4"><input type="button" name="demo-3" id="demo-3" value="check"/></td>
        </tr>
        <tr>
            <td><code>function Foo() {}</code></td>
            <td colspan="4"><input type="button" name="demo-4" id="demo-4" value="check"/></td>
        </tr>
        <tr>
            <td><code>new Foo()</code></td>
            <td colspan="4"><input type="button" name="demo-5" id="demo-5" value="check"/></td>
        </tr>
        <!--
        <tr>
            <td><code>elem.getElementsByTagName('p')</code></td>
            <td colspan="4"><input type="button" name="demo-6" id="demo-6" value="check"/></td>
        </tr>
        <tr>
            <td><code>Y.all('#demo td:foo')</code></td>
            <td colspan="4"><input type="button" name="demo-7" id="demo-7" value="check"/></td>
        </tr>
        -->
    <tbody>
</table>
<script type="text/javascript">
YUI({filter:"debug", logInclude: {example:true}}).use("node", function(Y) {
    // This method is in the core of the library, so we don't have to use() any
    // additional modules to access it.  However, this example requires 'node'.

    var checkType = function (val) {
        return {
            'object'  : Y.Lang.isObject(val),
            'array'   : Y.Lang.isArray(val),
            'function': Y.Lang.isFunction(val),
            'type'    : Y.Lang.type(val)
        };
    };

    var populateRow = function (e, data) {
        var target = e.target;
            cell = target.get('parentNode'),
            row  = cell.get('parentNode');

        row.removeChild(cell);

        var td0 = document.createElement('td'),
            td1 = td0.cloneNode(false),
            td2 = td0.cloneNode(false);
            td3 = td0.cloneNode(false);

        var results = checkType(data);

        td0.appendChild(document.createTextNode(results['object']   ? 'Y' : 'N'));
        td1.appendChild(document.createTextNode(results['array']    ? 'Y' : 'N'));
        td2.appendChild(document.createTextNode(results['function'] ? 'Y' : 'N'));
        td3.appendChild(document.createTextNode(results['type']));

        row.appendChild(td0);
        row.appendChild(td1);
        row.appendChild(td2);
        row.appendChild(td3);
    };

    var foo = function () {};
    var f = Y.one('#demo');

    Y.on('click',populateRow, '#demo-1', Y, null);
    Y.on('click',populateRow, '#demo-2', Y, []);
    Y.on('click',populateRow, '#demo-3', Y, {});
    Y.on('click',populateRow, '#demo-4', Y, foo);
    Y.on('click',populateRow, '#demo-5', Y, new foo());

    /*
    // We are working with Nodes and NodeLists now, so the results are not as interesting
    Y.on('click',populateRow, '#demo-6', Y, f.getElementsByTagName('tr'));
    Y.on('click',populateRow, '#demo-7', Y, Y.all('#demo td:foo'));
    */
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
